<template>
    <BasicModal @register="registerModal" :footer="false" :canFullscreen="false">
        <div style="text-align:center">
            <div class='test'>
                <svg id="barcode" class="barSvg"></svg>
            </div>
            <a-button type="primary" class="mt-5" v-print="Print">打印</a-button>
        </div>
    </BasicModal>
</template>
<script lang="ts">
import { BasicModal, useModalInner } from '/@/components/Modal';
import { defineComponent } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import JsBarcode from 'jsbarcode';
import Print from "vue3-print-nb";


export default defineComponent({

    components: { CollapseContainer, BasicModal },
    directives: {
        Print
    },
    setup() {

        const [registerModal] = useModalInner((record: any) => {
            JsBarcode("#barcode", record.samNum, {
                width: 1,//设置条之间的宽度
                height: 40,//高度
                displayValue: true,//是否在条形码下方显示文字
                //   text:"456",//覆盖显示的文本
                //   fontOptions:"bold italic",//使文字加粗体或变斜体
                //   font:"fantasy",//设置文本的字体
                //   textAlign:"left",//设置文本的水平对齐方式
                //   textPosition:"top",//设置文本的垂直位置
                //   textMargin:5,//设置条形码和文本之间的间距
                fontSize: 9,//设置文本的大小
                //   background:"#eee",//设置条形码的背景
                //   lineColor:"#2196f3",//设置条和文本的颜色。
                margin: 5//设置条形码周围的空白边距
            })
        });

        return {
            registerModal,
            Print: {
                id: 'barcode', // 这里是要打印元素的ID
                popTitle: '&nbsp', // 打印的标题
                extraCss: '', // 打印可引入外部的一个 css 文件
                extraHead: '' // 打印头部文字
            },
        };
    },
});

</script>
<style scoped>
.qrcode-demo-item {
    width: 30%;
    margin-right: 1%;
}

.test {
    width: 380px;
    height: 140px;
    position: relative;
    top: 50%;
    left: 10%;
}

svg {
    width: 100%;
    height: 100%;
}

.barSvg {
    display: block !important;
    text-align: center;
    margin: 10px 0 40px 0;
}
</style>
  